<template>
    <div>
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="">
          <el-input v-model="keyword" placeholder="请输入课程名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="findlike">查询</el-button>
        </el-form-item>
      </el-form>
      <el-button style="font-weight: bolder" type="text" round @click="findAll">全部</el-button>
      <span v-for="type in typeList">
         <el-button type="text" round v-model="type.typeId" @click="findByType(type.typeId)" >{{type.typeName}}</el-button>
      </span>


    <el-table
      :data="courseList"
      style="width: 100%">
      <el-table-column
        label="课程编号"
        prop="courseId"
        width="80">
      </el-table-column>
      <el-table-column
        label="课程名称"
        prop="courseName"
        width="80">
      </el-table-column>
      <el-table-column label="课程封面">
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.courseImg"
            fit="cover"></el-image>
        </template>
      </el-table-column>
      <el-table-column
        label="课程描述"
        prop="courseDesc"
        width="120">
      </el-table-column>
      <el-table-column
        label="课程开始时间"
        prop="courseBegintime"
        width="180">
      </el-table-column>
      <el-table-column
        label="课程结束时间"
        prop="courseEndtime"
        width="140">
      </el-table-column>
      <el-table-column
        label="课程价格"
        prop="coursePrice"
        width="140">
      </el-table-column>
      <el-table-column
        label="课程评分"
        prop="courseScore"
        width="140">
      </el-table-column>
      <el-table-column
        label="课程创建时间"
        prop="couresCreatetime"
        width="140">
      </el-table-column>
      <el-table-column
        label="课程更新时间"
        prop="courseUpdatetime"
        width="140">
      </el-table-column>
      <el-table-column
        label="课程分类"
        prop="typeName"
        width="140">
      </el-table-column>
      <el-table-column
        label="代课老师"
        prop="teacherName"
        width="140">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="150">
        <template slot-scope="scope">
          <el-button @click="del(scope.row)" type="danger" icon="el-icon-delete" circle ></el-button>
        </template>
      </el-table-column>
    </el-table>

      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page=pageable.current
          :page-sizes=pagesizes
          :page-size=pageable.size
          layout="total, sizes, prev, pager, next, jumper"
          :total=pageable.total>
        </el-pagination>
      </div>
    </div>
</template>

<script>
    export default {
        name: "admin_course",
        data(){
          return{
            courseList:[
              {
                courseId:'',
                courseName:'',
                courseDesc:'',
                courseImg:'',
                courseBegintime:'',
                courseEndtime:'',
                coursePrice:'',
                courseScore:'',
                couresCreatetime:'',
                courseUpdatetime:'',
                typeId:'',
                teacherId:'',
                typeName:'',
                teacherName:''
              }
            ],
            typeList:[
              {
                typeId:'',
                typeName:''
              }
            ],
            pageable:{
              current:'1',
              size:"1",
              total:'100',
              pages:'100',
            },
            pagesizes:[1,2,3,4],
            keyword:''
          }
        },
        methods:{
          del(row){
            this.$confirm('此操作将永久删除该课程, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
              center: true
            }).then(() => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.$axios.get('/course/del?courseId='+row.courseId).then(res=>{
                this.findAll();
              })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消',
              });
            });
          },
          findlike(){
            this.$axios.get('/course/findAll',{
              params:{
                current:'1',
                size:this.pageable.size,
                keyword:this.keyword
              }
            }).then(res=>{
              this.courseList=res.data.data;
              this.pageable.total=res.data.count;
            })
          },
          findAll(){
            this.$axios.get('/course/findAll',{
              params:{
                current:this.pageable.current,
                size:this.pageable.size,
                keyword:this.keyword
              }
            }).then(res=>{
              this.courseList=res.data.data;
              this.pageable.total=res.data.count;
            })
          },
          findAllType(){
            this.$axios.get('/type/findAll').then(res=>{
              this.typeList=res.data;
            })
          },
          findByType(typeId){
            this.$axios.get('/course/findByType',{
              params:{
                current:this.pageable.current,
                size:this.pageable.size,
                keyword:this.keyword,
                typeId:typeId
              }
            }).then(res=>{
              this.courseList=res.data.data;
              this.pageable.total=res.data.count;
            })
          },
          handleSizeChange(val) {
            this.pageable.size=val;
            this.findAll();
          },
          handleCurrentChange(val) {
            this.pageable.current=val;
            this.findAll();
          }
        },
        mounted(){
          this.findAll();
          this.findAllType();
        }

    }
</script>

<style scoped>

</style>
